<template>
	<view class="relative">
		<form-list v-if="active === 'form'"></form-list>
		<form-history v-if="active === 'history'"></form-history>
		<u-tabbar :value="active" activeColor="#2d58cb" @change="menuChange">
			<u-tabbar-item v-for="item in menuList" :key="item.id" :name="item.id" :text="item.name" :icon="item.icon"></u-tabbar-item>
		</u-tabbar>
	</view>
</template>

<script>
	import FormList from './form-list.vue'
	import FormHistory from './form-history.vue'
	export default {
		name: 'FormIndexPage',
		components: {
		    FormList,FormHistory
		},
		data() {
			let fomView = this.$store.state.formView;
			return {
			    active: fomView.indexActive,
			    menuList:[
			        {id: 'form',name: '表单列表', icon:'file-text'},
			        {id: 'history',name: '表单记录', icon:'clock'}
			    ]
			}
		},
		watch:{
		    active(){
		        this.$store.state.formView.indexActive = this.active;
		    }
		},
		methods: {
			menuChange(id){
			    this.active = id;
			}
		}
	}
</script>

<style>

</style>
